<!--
@license
Copyright 2016 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="tf-categorizer.html">
<link rel="import" href="tf-run-selector.html">

<!--
tf-sidebar-helper is a component that renders a sidebar for configuration
components, like the tf-categorizer and the tf-run-selector. The component can
also be extended with more options useful to the dashboards.

To use it, create the tf-sidebar-helper with the required properties. To extend
it with extra configuration components, add them to the element's component:

<tf-sidebar-helper
  backend: "[[backend]]",
  categories: "{{outputCategories}}",
  colorScale: "[[colorScale]]",
  run2tag: "[[run2tag]]",
  runs: "[[runs]]",
  selectedRuns: "{{outSelectedRuns}}",
  >
  <div class="extend-first-section">
    <my options>
  </div>
  <div class="sidebar-section">
    <my options>
  </div>
  ...
</tf-sidebar-helper>

Elements inside the .extend-first-section div will be put on the first section
of the sidebar, while the rest of the divs will be put after it and before the
tf-run-selector.

@element tf-sidebar-helper
-->
<dom-module id="tf-sidebar-helper">
  <template>
    <div class="sidebar-section">
      <tf-categorizer
        id="categorizer"
        tags="[[tags]]"
        categories="{{categories}}"
        ></tf-categorizer>
      <content select=".extend-first-section"></content>
    </div>
    <content></content>
    <div class="sidebar-section">
      <tf-run-selector
        id="runSelector"
        backend="[[backend]]"
        runs="[[runs]]"
        color-scale="[[colorScale]]"
        out-selected="{{selectedRuns}}"
        ></tf-run-selector>
    </div>
    <style include="dashboard-style"></style>
    <style>
      :host {
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      #categorizer {
        flex-shrink: 0;
      }

      #runSelector {
        flex-shrink: 1;
        flex-grow: 1;
      }

      .sidebar-section {
        border-top: solid 1px rgba(0, 0, 0, 0.12);
        padding: 20px 0px 20px 30px;
      }

      .sidebar-section:first-child {
        border: none;
      }

      .sidebar-section:last-child {
        flex-grow: 1;
        display: flex;
      }

      paper-checkbox {
        --paper-checkbox-checked-color: var(--tb-ui-dark-accent);
        --paper-checkbox-unchecked-color: var(--tb-ui-dark-accent);
        font-size: 14px;
      }
    </style>
  </template>
  <script>
    Polymer({
      is: "tf-sidebar-helper",
      properties: {
        /**
         * The backend object used to issue requests.
         */
        backend: Object,

        /**
         * This is an output of the categories that the user selected to
         * separate the different tags. Each category here should be given its
         * own collapsible pane.
         */
        categories: {
          type: Array,
          notify: true,
        },

        /**
         * Input of the colors that are used for the user's runs.
         */
        colorScale: Object,

        /**
         * Map from runs to the valid tags that have them.
         */
        run2tag: Object,

        /**
         * Input of all valid runs that can be selected by the user.
         */
        runs: Array,

        /**
         * Outputs an array with the runs that are selected by the user (i.e.
         * valid to be displayed).
         */
        selectedRuns: {
          type: Array,
          notify: true,
        },

        tags: {
          type: Array,
          computed: "_getTags(run2tag.*)"
        },
      },
      _getTags: function() {
        return _.union.apply(null, _.values(this.run2tag));
      },
    })
  </script>
</dom-module>
